<template>
    <div class="ps-bz-bengfang">
        <section class="tableBox2">
            <div :class="{ active: isActive1==1 }" @click="changeActive1(1)"><i class="iconfont icon-bengzhan"></i><p>1号泵</p></div>
            <div :class="{ active: isActive1==2 }" @click="changeActive1(2)"><i class="iconfont icon-bengzhan"></i><p>2号泵</p></div>
            <div :class="{ active: isActive1==3 }" @click="changeActive1(3)"><i class="iconfont icon-bengzhan"></i><p>3号泵</p></div>
            <div :class="{ active: isActive1==4 }" @click="changeActive1(4)"><i class="iconfont icon-bengzhan"></i><p>4号泵</p></div>
        </section>
        <section class="chartBtn2">
            <div :class="{ active: isActive2==1 }" @click="changeActive2(1)">频率</div>
            <div :class="{ active: isActive2==2 }" @click="changeActive2(2)">电流</div>
        </section>
        <section class="chartBtn chartBtn-center">
            <div :class="{ active: isActive3==1 }" @click="changeActive3(1)">今日/昨日</div>
            <div :class="{ active: isActive3==2 }" @click="changeActive3(2)">本周</div>
            <div :class="{ active: isActive3==3 }" @click="changeActive3(3)">本月</div>
        </section>
        <section>
            <div ref="echartContainer" style="width:100%; height:300px"></div>
        </section>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isActive1: 1,
            isActive2: 1,
            isActive3: 1,
            detailsList: [],
            siteIdData: {
                in: '',
                out: ''
            },
            water: {

            },
            videoList: [],
            mapId: {
                x: '120.222744',
                y: '30.191123'
            }
        };
    },
    mounted() {
        this.select()
    },
    methods: {
        changeActive1(num) {
            this.isActive1 = num
        },
        changeActive2(num) {
            this.isActive2 = num
        },
        changeActive3(num) {
            this.isActive3 = num
        },
        //获取echart数据
        select() {
            let myChart = echarts.init(this.$refs.echartContainer);
            // myChart.resize()
            // this.getEveryDayEvent(() => {
            myChart.setOption({
                title: {
                    text: '流量',
                    // subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['实时', '昨日']
                },
                toolbox: {
                    show: true
                },
                calculable: true,
                grid: { // 控制图的大小，调整下面这些值就可以，
                    x: 40,
                    x2: 20,
                    y2: 30 // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '实时',
                        type: 'line',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: '昨日',
                        type: 'line',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
            });
            // });
        }
    }
}
</script>

<style>
</style>
